<%--
  Created by IntelliJ IDEA.
  User: 22179
  Date: 2025/3/5
  Time: 10:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
        <link rel="stylesheet" href="static/css/index_work.css">
        <title>Title</title>
      <script src="/static/css/jquery-3.3.1.js"></script>

  </head>
<body>
  <form action="/User/adduser" method="post">
    <input value="adduser" name="method" hidden>
    姓名:<input type="text" name="name"><br>
    账号:<input type="text" name="username" id="username">
      <span id="uSpan"></span>
      <br>
    密码:<input type="password" name="pwd"><br>
    年龄:<input type="text" name="age"><br>
    性别:<input type="radio" name="sex" value="男">男
      <input type="radio" name="sex" value="女">女<br>
    爱好:<c:forEach var="hobby" items="${hobby}">
      <input type="checkbox" name="hobby" value="${hobby.name}">${hobby.name}
    </c:forEach>
    <br />
    角色:<select name="rid">
        <option value="0">--请选择--</option>
       <c:forEach var="role" items="${role}">
         <option value="${role.id}">--${role.name}--</option>
       </c:forEach>
      </select><br>
      <input type="submit" value="提交">
  </form>
  <script>
      //1.为用户名绑定失去焦点事件
      $("#username").blur(function (){
          let username = $("#username").val();
          //2.jQuery的Post方式实现AJAX
          $.post(
              //请求的资源路径
              "/user2",
              //请求参数
              "username=" + username
              ,

              //回调函数
              function (data) {
                  //将响应的数据显示到span标签
                  if(data == "1"){
                      $("#uSpan").html("用户名已存在,不可注册");
                      $("#uSpan").css("color","red");
                  }else{
                      $("#uSpan").html("用户名可用");
                      $("#uSpan").css("color","green");
                  }
              },
              //响应数据形式
              "text"
          );
      });
  </script>

</body>
</html>
